require(['./config'], () => {
  require(['jquery', 'template', 'Shortcut'], ($, template, Shortcut) => {

    class List {
      constructor () {
        this.loadPublic()
        this.getDate().then(()=>{
          this.renderList(this.body)
          this.addEvent()
        })
      }

      loadPublic () {
        const _this = this
        $('.shortcut').load('/HTML/shortcut.html')
        $('.footer').load('/HTML/footer.html')
        $('.sidebar').load('/HTML/sidebar.html')
        $('.header').load('/HTML/header.html', () => {
          $('.nav-class').show()
            .on('mouseenter', function () {
              $('.category').show()
              $('.category-item').eq(0).addClass('active')
            })
            .on('mouseleave', function () {
              $('.category').hide()
              $('.category-item').removeClass('active')
            })
          $('.category').load('/HTML/nav.html', function () {
            $(this).hide().addClass('detail')
            _this.showNavMoreEvent()
          })
        })
      }

      showNavMoreEvent () {
        const _this = this
        $('.category-item')
          .on('mouseenter', function () {
            $('.category-item').eq(_this.navMainLastIndex).removeClass('active')
            $(this).addClass('active')
          })
          .on('mouseleave', function () {
            _this.navMainLastIndex = $(this).index()
          })
      }

      addEvent() {
        const _this = this
        $('#commentOrder').on('click', function() {
          $(this).parent().addClass('selected').siblings().removeClass('selected')
          _this.commentRange()
        })

        $('#currentOrder').on('click', function () {
          $(this).parent().addClass('selected').siblings().removeClass('selected')
          _this.renderList(_this.body)
        })

        $('#priceOrder').on('click', function () {
          let $li =$(this).parent()
          $li.addClass('selected').siblings().removeClass('selected')

          if ($li.hasClass('sort-desc')) {
            $li.removeClass('sort-desc').addClass('sort-asc')
            _this.priceRange('asc')
          } else {
            $li.removeClass('sort-asc').addClass('sort-desc')
            _this.priceRange('desc')
          }
        })
      }

      getDate() {

        const cate = window.location.search.slice(1).split('&').reduce((obj, item) => {
          let arr = item.split('=')
          obj[arr[0]] = arr[1]
          return obj
        }, {}).cate
        return new Promise(resolve => {
          $.get('/api/list', { cate }, res => {
            this.body = res.body
            resolve()
          })
        })
      }

      renderList(data) {
        $('#pro-list').html(template('listTemplate', data))
      }

      commentRange() {
        let list = JSON.parse(JSON.stringify(this.body.list))

        list.sort(function (a, b) {
          return b.comment -a.comment
        })

        this.renderList({ list })
      }

      priceRange(dir) {
        let list = JSON.parse(JSON.stringify(this.body.list))
        console.log(list)

        list.sort(function (a, b) {
          return b.price - a.price
        })

        if(dir === 'asc') list.reverse()

        this.renderList({ list })
      }
    }

    new List()
  })
})
